<template>
    <RePage>

        <div class="split-pane">
            <splitpane :splitSet="settingLR">
                <!-- #paneL 表示指定该组件为左侧面板 -->
                <template #paneL>
                    <!-- 自定义左侧面板的内容 -->
                    <div class="pr-[16px] h-full">
                        <treeList ref="treeListRef" :treeProops="treeProops" :treeEvents="treeEvents" :pageShow="false"
                            :inputShow="false" />
                    </div>
                    <!-- <div class="dv-a">A</div> -->

                </template>
                <!-- #paneR 表示指定该组件为右侧面板 -->
                <template #paneR>
                    <div class="flex flex-col h-full">
                        <MyFormCreate :clear-event="getTableList" class="px-[10px]" v-model="searchFrom"
                            :rule="searchFormRules" :key="key">
                            <el-button type="primary" @click="DebounceGetTableList">搜索</el-button>
                            <sj-button custom-type="sinfo" @click="DebounceResetting">重置</sj-button>
                        </MyFormCreate>
                        <div class="flex-1 relative">
                            <div v-page-show="{ show: tableData.total != 0, text: `暂无视频` }"
                                class="flex w-[100%] gap-[20px] flex-wrap  px-[20px]">
                                <div v-for="item in tableData.data" :key="item">
                                    <div class="cursor-pointer flex justify-center items-center w-[300px] h-[172px] bg-[#000]">
                                        <img :src="img" class="w-[100px] h-[100px] " @click="infos(item)" />

                                    </div>
                                    <div class="text-left text-[14px] font-medium mt-[10px]">
                                        {{ isNullOrEmpty( item.monitorName ) }}
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div v-if="tableData.total != 0" class="mt-5 mr-5">
                            <el-pagination class="flex justify-center" v-model:current-page="searchFrom.page"
                                :page-sizes="[8, 4]" background :layout="PAGE_LAYOUTS" :total="tableData.total"
                                @size-change="getTableList" @current-change="getTableList" />
                        </div>
                    </div>
                </template>
            </splitpane>
        </div>
    </RePage>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import treeList from "@/components/treeList/treeList.vue";
import { PAGE_LAYOUTS } from '@/constant';
import { Plus } from '@element-plus/icons-vue';
import { addDialog } from "@/components/ReDialog";
import RePage from "@/components/RePage/index.vue";
import MyFormCreate from "@/components/MyFormCreate/index.vue";
import { defaultSearchFrom, defaultInfoFrom, defaultInfoForm } from './index';
import splitpane, { ContextProps } from "@/components/ReSplitPane";
import { reactive } from "vue";
// import editForm from "./form.vue";
import info from "./info.vue";
import { message } from "@/utils/message";
import { ElMessage, ElMessageBox } from "element-plus";
import { deviceDetection, debounce } from "@pureadmin/utils";
import { getList, getInfo, addInfo, editInfo, deleteInfo,videomonitorschannelsplay } from '@/api/operate/video-management/index';

import { customPromiseDebounce } from "@/utils/functions";

import { facilitbuildings } from "@/api/operate/timed-tasks/index";
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
import img from '@/assets/home/videoimg.png'
const operate = usePageVariablesStoreHook().getOperate()
defineOptions({
    name: "SplitPane"
});
const tableData = reactive({
    data: [],
    total: 0,

});
const childrenbuilding = ref()
const showBuildingId = ref() //父级的建筑id
const treeListRef = ref();
const settingLR: ContextProps = reactive({
    minPercent: 17,
    maxPercent: 17,
    defaultPercent: 17,
    split: "vertical"
});
const formRef = ref();
const key = ref(0);
const video = ref([])
const showVideo = ref(true)
const showInfo = ref();
const ids = ref()
const searchFrom = ref(defaultSearchFrom());
const props = {
    label: "buildingName",
    value: "buildingId",
    children: "children",
    //    isLeaf: "isLeaf"
};
const isLoading = ref(true);
const treeRef = ref();
const projectList = ref([]);
const drawingId = ref();
const drawingIdShow = ref(true)
// const selectionChange = data => {
//   selectionData.value = data;
// };
onMounted(() => {
    // loadProjectList();
    // getTableList()
    // treeRef.value = treeListRef.value.getTreeRef();
    loadProjectList().then(() => {
        treeListRef.value.getTreeRef().setCurrentKey(projectList.value[0].buildingId);
        searchFrom.value.buildingId = projectList.value[0].buildingId
        getTableList()
    })
});
const loadProjectList = () => {
    return new Promise((resolve, reject) => {
        isLoading.value = true;
        facilitbuildings()
            .then(res => {
                let arrs = [
                    {
                        buildingId: "0",
                        buildingName: "全部",
                        children: []
                    },
                    {
                        buildingId: "01",
                        projectId: res.result.projectId,
                        buildingName: "项目平面",
                        children: []
                    }
                ];
                res.result.buildingInfo.unshift(...arrs);
                res.result.buildingInfo.forEach(item => {
                    if (item.children.length > 0) {
                        item.children.forEach(item1 => {
                            item1.showBuildingId = item.buildingId;
                            item1.buildingId = item1.drawingId + "-1" + item.buildingId;
                            item1.buildingName = item1.drawingName;
                        });
                    }


                });
                console.log("day", res.result.buildingInfo);
                projectList.value = res.result.buildingInfo;

            })
            .finally(() => {
                isLoading.value = false;
                resolve('');
            });
    });
};
const handleNodeClick = data => {

    if (data.buildingName !== '全部') {
        drawingIdShow.value = false;
    }
    if (data.buildingName !== '项目平面') {
        drawingIdShow.value = false;
    }
    if (data.drawingId == undefined && data.buildingName !== '项目平面') {
        drawingIdShow.value = true;
    }

    childrenbuilding.value = data.buildingId
    drawingId.value = data.drawingId;
    showBuildingId.value = data.showBuildingId;
    console.log(data);
    switch (true) {
        case data.buildingId == "0":
            searchFrom.value.projectId = "";
            searchFrom.value.buildingId = "";
            searchFrom.value.drawingId = "";
            getTableList();
            return;
        case data.buildingId === "01":
            searchFrom.value.projectId = data.projectId;
            searchFrom.value.buildingId = "";
            searchFrom.value.drawingId = "";
            getTableList();
            return;
        case data.drawingId !== undefined:
            searchFrom.value.projectId = "";
            searchFrom.value.buildingId = "";
            searchFrom.value.drawingId = data.drawingId;
            getTableList();
            return;
        case data.buildingId !== 0:
            searchFrom.value.projectId = "";
            searchFrom.value.buildingId = data.buildingId;
            searchFrom.value.drawingId = "";
            getTableList();
            return;
    }
};
const treeEvents = {
    nodeClick: handleNodeClick
};
const filterMethod = (query, node) => {
    return node.buildingName.includes(query);
};
const treeProops = ref({
    props: props,
    data: projectList,
    "item-size": 46,
    "filter-method": filterMethod,
    nodeKey: "buildingId",
    "highlight-current": true,
});

// 删除
const deletes = () => {
    if (video.value.length == 0) {
        message(`请选择要删除的视频`, {
            type: "info"
        });
    } else {
        ElMessageBox.confirm(
            '确认删除这条数据?',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                deleteInfo({ ids: ids.value }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        ids.value = []
                        video.value = []
                        getTableList();
                    }
                })
            })
    }

}

//选择视频
const changeVideo = (val: any) => {
    ids.value = val
    if (ids.value.length == 0) {
        showVideo.value = true
    } else {
        showVideo.value = false
    }

    console.log("video", val);
}
const infos = (row) => {
    videomonitorschannelsplay({ channelsId: row.channelsId}).then(res=>{
        addDialog({
        title: row.monitorName,
        width: "800px",
        draggable: true,
        fullscreen: deviceDetection(),
        fullscreenIcon: true,
        closeOnClickModal: false,
        hideFooter: true,
        props: {
            isLoading: true,
            formInline: row,
            videoUrl: res.result.url,
            playDuration:res.result.playDuration
        },
        contentRenderer: () => h(info, { ref: formRef }),
    });
    })

}
// 获取列表数据
const getTableList = () => {
    getList(searchFrom.value).then(res => {
        if (res.code === 200) {
            tableData.data = res.result.data;
            tableData.data.forEach(item => {
                item.img = "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
            })
            // tableData.total = 10;
            tableData.total = res.result.total;
        }
    })
}

// 重置搜索栏
const resetting = () => {//点击重置按键
    Object.assign(searchFrom.value, defaultSearchFrom())
    key.value++
    getTableList()
}
const searchFormRules = [
    {
        type: 'input', field: 'channelsId', title: '通道编号', value: null,

        props: {
            placeholder: '请输入通道编号', clearable: true,


        }
    },
    {
        type: 'input', field: 'deviceId', title: '设备编号', value: null,
        props: {
            placeholder: '请输入设备编号', clearable: true
        }
    },
    { type: 'number', field: 'page', title: 'page', hidden: true },
    { type: 'number', field: 'limit', title: 'limit', hidden: true },
];
// 添加请求
const DebounceAddInfo = customPromiseDebounce(addInfo, 1000, true);
// 获取列表
const DebounceGetTableList = debounce(getTableList, 1000, true);
// 重置
const DebounceResetting = debounce(resetting, 1000, true);
</script>
<style lang="scss" scoped>
.split-pane {
    width: 100%;
    height: calc(100vh - 200px);

    //   font-size: 50px;
    //   text-align: center;
    //   border: 1px solid #e5e6eb;

    //   .dv-a {
    //     padding-top: 0vh;
    //     color: rgba($color: dodgerblue, $alpha: 80%);
    //   }

    //   .dv-b {
    //     padding-top: 0vh;
    //     color: rgba($color: #000, $alpha: 80%);
    //   }

    //   .dv-c {
    //     padding-top: 0vh;
    //     color: rgba($color: #ce272d, $alpha: 80%);
    //   }
}
</style>
